<template>
  <img class="image" src="@/assets/img/lofi-japanese.jpg">
  <div class="more-article-container">
    <div class="tag-container">
      <div class="tag" v-for="(tag, index) in tagList" @click="tagClick(tag)">
        {{ tag.tagName }}
      </div>
    </div>

    <div class="find-container">
      <svg t="1753233553987" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
           p-id="5519" width="200" height="200">
        <path
            d="M259.6352 732.9792c59.2384 63.4368 143.5648 103.2192 237.0048 103.2192 162.2528 0 297.0624-119.7056 320.7168-275.456-70.912 40.4992-160.8192 78.9504-258.0992 110.0288-107.6736 34.4064-213.248 56.2688-299.6224 62.208zM941.3632 371.8656c-17.152-53.6064-109.1072-58.7776-184.4736-53.4016C697.7536 238.9504 603.136 187.392 496.64 187.392c-178.8928 0-324.4032 145.5104-324.4032 324.4032v0.3584c-77.312 51.2512-110.2336 97.2288-97.6384 136.6528 11.7248 36.608 58.5216 55.0912 139.264 55.0912 8.8064 0 18.0224-0.2048 27.648-0.6656 86.6304-3.9424 196.1984-25.9072 308.3776-61.7472 112.2304-35.84 214.1696-81.5104 287.0784-128.512 82.2784-53.0432 117.3504-100.5056 104.3968-141.1072z m-126.5664 106.7008c-69.9392 45.1072-168.448 89.1392-277.3504 123.904-108.9024 34.816-214.6304 56.064-297.7792 59.8528-91.5968 4.1984-122.2656-14.3872-126.0032-26.0096-3.2256-10.0864 7.2704-36.7616 62.1568-76.8 3.7376 25.1392 10.3936 49.3056 19.5584 72.2432 17.7664 0.8704 40.1408 0.6144 68.096-1.7408 76.288-6.4512 170.2912-26.624 264.6528-56.7808s182.6304-68.2496 248.5248-107.2128c14.2336-8.3968 26.368-16.2816 36.864-23.6032a321.024 321.024 0 0 0-31.3344-84.2752c75.6736-2.6112 115.3536 10.9568 120.2176 26.1632 3.6864 11.6224-10.5984 44.544-87.6032 94.2592z"
            fill="#9fc6ff" p-id="5520"></path>
      </svg>
      <span>发现</span>
    </div>
    <div class="card-container">
      <CommonCardSearch @click="toArticleDetail(item)" :idx="index" v-for="(item, index) in articleDataList"
                        :key="item.id" :cardData="item">
      </CommonCardSearch>
    </div>
    <a-pagination v-model:pageSize="queryForm.pageModel.pageSize" @change="onChange"
                  v-model:current="queryForm.pageModel.pageNow" :total="total" show-less-items/>
  </div>
</template>

<script setup>
import CommonCardSearch from '@/components/CommonCardSearch.vue';
import {onMounted, reactive, ref} from 'vue';
import {findArticlePage, findTagListByCategory} from '@/api/article';
import {useRoute, useRouter} from 'vue-router';

const router = useRouter();
const route = useRoute();
const categoryId = route.query.categoryId;
const articleDataList = ref([]);
const tagList = ref([]);
const total = ref(0);
const queryForm = reactive({
  pageModel: {
    pageNow: 1,
    pageSize: 10,
    query: {
      category_id1: route.query.categoryId,
    }
  },
  tagId: '',
})
// 获取标签列表
const getTagList = () => {
  findTagListByCategory({id: categoryId}).then(res => {
    if (res.code === 200) {
      tagList.value = res.data;
    }
  })
}

const tagClick = (tag) => {
  queryForm.tagId = tag.tagId;
  getArticleList();
}

const getArticleList = () => {
  findArticlePage(queryForm).then((res) => {
    if (res.code === 200 && res.data) {
      articleDataList.value = res.data.list.dataList
      total.value = res.data.list.total
    }
  });
}

const onChange = () => {
  getArticleList();
}

const toArticleDetail = (item) => {
  router.push({path: '/article', query: {id: item.id}});
}

onMounted(() => {
  getTagList();
  getArticleList();
});

</script>

<style scoped lang="less">
.image {
  width: 100%;
  height: 300px;
  object-fit: cover;
}

.more-article-container {
  max-width: 1000px;
  margin: 0 auto;
  width: 90%;

  .tag-container {
    box-shadow: var(--card-shadow-1);
    display: flex;
    flex-wrap: wrap;
    background-color: #fff;
    border-radius: 10px;
    margin: 50px auto;
    transition: 0.3s all linear;

    &:hover {
      box-shadow: var(--card-shadow-5);
    }

    .tag {
      color: #fff;
      margin: 20px 20px;
      border-radius: 8px;
      padding: 8px 7px;
      cursor: pointer;
      background-color: brown;

      &:hover {
      }
    }
  }

  .find-container {
    font-size: 20px;
    color: var(--text-color1);
    display: flex;
    align-items: center;
    border-bottom: 1px dashed var(--dashed-color);
    padding-bottom: 10px;


    svg:first-child {
      margin-right: 5px;
    }
  }

  .card-container {
    margin-top: 50px;
  }

}

:where(.css-dev-only-do-not-override-1p3hq3p).ant-pagination {
  text-align: center !important;
  margin: 50px 0 !important;
}

:where(.css-dev-only-do-not-override-1p3hq3p).ant-pagination :deep(.ant-pagination-item-active) {
  background-color: #2b5aed !important;
  border-color: #efefef !important;
}

:deep(:where(.css-dev-only-do-not-override-1p3hq3p).ant-pagination .ant-pagination-item-active a) {
  color: #fff !important;
}

:deep(:where(.css-dev-only-do-not-override-1p3hq3p).ant-pagination .ant-pagination-disabled .ant-pagination-item-link),
:deep(:where(.css-dev-only-do-not-override-1p3hq3p).ant-pagination .ant-pagination-disabled:hover .ant-pagination-item-link) {
  border-color: #efefef !important;
  background-color: #efefef !important;
}

:deep(.ant-pagination-item),
:deep(.ant-pagination-prev),
:deep(.ant-pagination-next) {
  background-color: #efefef !important;
}
</style>